<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图片裁剪</title>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%--     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/cropper/normalize.css" /> --%>
<%-- 	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/cropper/default.css"> --%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/cropper/font-awesome.min.css">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
  	<link href="${pageContext.request.contextPath}/static/plugins/cropper/dist/cropper.css" rel="stylesheet">
  	<link href="${pageContext.request.contextPath}/static/plugins/cropper/main.css" rel="stylesheet">
  	<link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
  	
  	<script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
	  <script src="${pageContext.request.contextPath}/static/plugins/cropper/dist/cropper.js"></script>
	  <script src="${pageContext.request.contextPath}/static/plugins/cropper/main.js"></script>
  	<script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
	  
</head>
<body>
<div class="col-sm-12">
 <div class="container">
    <div class="row">
 	<form class="form-horizontal m-t" method="post" id="form"
 		action="${pageContext.request.contextPath}/admin/lifeResource_picCut.action?path=${path}"  enctype="multipart/form-data">
<!--  	<form id="uploadForm" class="avatar-form" enctype="multipart/form-data" > -->
<!-- 	   <a id="sure" onclick="sure()" hidden="true">first</a> -->
		<input type="hidden" value="${path}" name="path">
	   <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file" style="margin-left: 14px;">
            <input type="file" class="sr-only" id="inputImage" name="upload" accept="image/*">
              <span >选择图片</span>
          </label>
      <div class="col-md-9 docs-buttons" style="display: none;">
        <button class="btn btn-primary" id="getData" data-method="getData" data-option="" data-target="#putData" type="button">
          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getData&quot;)">
            Get Data
          </span>
        </button>
        <input class="form-control" id="putData" name="putData" type="hidden"  placeholder="Get data to here or set data with this value">
      </div>
     </form>    
    </div>
    <div class="row">
      <div class="col-md-9">
        <!-- <h3 class="page-header">Demo:</h3> -->
        <div class="img-container">
          <img src="/static/plugins/cropper/img/picture.jpg" id="img" alt="Picture">
        </div>
      </div>
      <div class="col-md-3">
        <!-- <h3 class="page-header">Preview:</h3> -->
        <div class="docs-preview clearfix">
          <div class="img-preview preview-lg"></div>
        </div>
	<div class="btn-group">
          <button class="btn btn-primary" data-method="zoom" data-option="0.1" type="button" title="Zoom In">
            <span class="docs-tooltip" data-toggle="tooltip" title="放大">
              <span class="icon icon-zoom-in"></span>
            </span>
          </button>
          <button class="btn btn-primary" data-method="zoom" data-option="-0.1" type="button" title="Zoom Out">
            <span class="docs-tooltip" data-toggle="tooltip" title="缩小">
              <span class="icon icon-zoom-out"></span>
            </span>
          </button>
<!--           <button class="btn btn-primary" data-method="rotate" data-option="-45" type="button" title="Rotate Left"> -->
<%--             <span class="docs-tooltip" data-toggle="tooltip" title="左旋45°"> --%>
<%--               <span class="icon icon-rotate-left"></span> --%>
<%--             </span> --%>
<!--           </button> -->
<!--           <button class="btn btn-primary" data-method="rotate" data-option="45" type="button" title="Rotate Right"> -->
<%--             <span class="docs-tooltip" data-toggle="tooltip" title="右旋45°"> --%>
<%--               <span class="icon icon-rotate-right"></span> --%>
<%--             </span> --%>
<!--           </button> -->
<!--         	<button class="btn btn-primary" data-method="setDragMode" data-option="move" type="button" title="移动"> -->
<%-- 	            <span class="docs-tooltip" data-toggle="tooltip" title="移动图片位置"> --%>
<%-- 	              <span class="icon icon-move"></span> --%>
<%-- 	            </span> --%>
<!--           	</button> -->
          	<button class="btn btn-primary" data-method="clear" type="button" title="Clear">
	            <span class="docs-tooltip" data-toggle="tooltip" title="清空">
	              <span class="icon icon-remove"></span>
	            </span>
         	</button>
          <button class="btn btn-primary" data-method="reset" type="button" title="Reset">
            <span class="docs-tooltip" data-toggle="tooltip" title="重新裁剪">
              <span class="icon icon-refresh"></span>
            </span>
          </button>
<!--           <button class="btn btn-primary" data-method="destroy" type="button" title="Destroy"> -->
<%--             <span class="docs-tooltip" data-toggle="tooltip" title="取消裁剪"> --%>
<%--               <span class="icon icon-off"></span> --%>
<%--             </span> --%>
<!--           </button> -->
        </div>
      </div>
    </div>
    
    
  </div>
</div>
<script>
// function sure(){
// 	var formData = new FormData($( "#uploadForm" )[0]); 
// 	$.ajax({  
//         url: '${pageContext.request.contextPath}/admin/lifeResource_picCut.action' ,  
//         type: 'POST',  
//         data: formData,  
//         async: false,  
//         cache: false,  
//         contentType: false,  
//         processData: false,  
//         success: function (result) {  
//              result = JSON.parse(result)
//              if (result.code == 1) {
//            		 var index = parent.layer.getFrameIndex(window.name);
//                  parent.layer.close(index); 
//              }else{
//              	layer.alert(result.msg);
//              }
//         },  
//         error: function (returndata) {  
//             alert(returndata);  
//         }  
//    }); 
// }
// $("#upload1").change(function () {
//     var filename = $(this).val();
//     alert(filename);
//     var index = filename.lastIndexOf("\\");
//     $("input[name='content']").val(filename.substring(index + 1));
// }); 

</script>
</body>
</html>
